<template>
  <div :class="`${prefixClass}`">
    <slot>
      <el-input
        v-if="mode === 'input'"
        v-model="columnItem.modelValue.inputValue"
        @input="updateValue"
        class="w-50 m-2"
        placeholder="请输入"
        :disabled="columnItem.modelValue.isBlank || columnItem.modelValue.notBlank"
        :prefix-icon="Search"
      />
      <FISelect
        v-if="mode === 'select'"
        v-model="columnItem.modelValue"
        @input="updateValue"
        :teleported="false"
        :options="options"
        v-bind="{ ...selectBinds, ...$attrs }"
      >
      </FISelect>
      <!-- <OyAmountRange :initial-min-value="50" :initial-max-value="150" v-model="columnItem.modelValue" /> -->
      <OyInputNumberRange
        v-if="mode === 'number-range'"
        :value="columnItem.modelValue"
        v-model="columnItem.modelValue"
        @inputfrom="handleInputFrom"
        @inputto="handleInputTo"
        @input="updateValue"
        v-bind="{ ...selectBinds, ...$attrs }"
      />
      <FIDatePicker
        v-if="mode === 'date-picker'"
        style="width: 100%"
        :teleported="false"
        type="daterange"
        v-model="columnItem.modelValue"
        @input="updateValue"
        placeholder="请选择"
        v-bind="{ ...selectBinds, ...$attrs }"
      />
      <el-time-picker
        v-if="mode === 'time-picker'"
        :teleported="false"
        style="width: 100%"
        v-model="columnItem.modelValue"
        @input="updateValue"
        is-range
        range-separator="~"
        start-placeholder="开始时间"
        end-placeholder="结束时间"
        v-bind="{ ...timePickerBinds, ...$attrs }"
      />
    </slot>
    <slot name="footer">
      <div :class="`${prefixClass}-footer`">
        <div :class="`${prefixClass}-footer__check`">
          <el-checkbox
            v-if="mode === 'input' || showNull"
            :class="`${prefixClass}-footer__check1`"
            v-model="columnItem.modelValue.isBlank"
            >空</el-checkbox
          >
          <el-checkbox v-if="mode === 'input' || showNull" v-model="columnItem.modelValue.notBlank">非空</el-checkbox>
        </div>
        <div :class="`${prefixClass}-footer__btn`">
          <FIButton size="small" @click="reSet">清除</FIButton>
          <FIButton type="primary" size="small" @click="filterConfirm">查询</FIButton>
        </div>
      </div>
    </slot>
  </div>
</template>
<script setup lang="ts">
import { ref, defineEmits, computed, watch } from 'vue'
import { Search } from '@element-plus/icons-vue'
import OyInputNumberRange from './OyInputNumberRange.vue'
import FISelect from '@/components/FISelect/index.vue'
import { getFilterOperation } from '@/utils/common.js'
const prefixClass = 'oy-table-filter'
interface configInterface {
  ops: string // like->input, in->selectt, between->范围, equal->等于
  valueLike?: string
  valueIn?: [string, Array<string>]
  valueNull?: string
  valueBetweenMin?: string
  valueBetweenMax?: string
  valueEqual?: string
  isBlank?: boolean // 空
  notBlank?: boolean // 非空
}
const props = defineProps({
  columnItem: {
    type: Object,
    required: true,
    default: () => ({
      label: '',
      prop: '',
      queryName: '',
      align: '',
      width: '',
      editType: '',
      sortable: false,
      filterable: true,
      modelValue: {
        inputValue: '',
        isBlank: false,
        notBlank: false,
      },
      // ... 其他属性
    }),
  },
  // modelValue: {
  //   type: [String, Array, Object],
  // },
  // mode: {
  //   type: String,
  //   default: 'input',
  // },
  // 当select时需要传递
  options: {
    type: Array,
    default: () => {
      return []
    },
  },
  // select其他配置参数
  selectBinds: {
    type: Object,
    default: () => {
      return {}
    },
  },
  timePickerBinds: {
    type: Object,
    default: () => {
      return {}
    },
  },
  showNull: {
    type: Boolean,
    default: false,
  },
  showFull: {
    type: Boolean,
    default: false,
  },
})
const filterValueSate = ref<configInterface>({
  ops: 'like',
  valueLike: '',
  valueIn: [],
  valueNull: '',
  valueBetweenMin: '',
  valueBetweenMax: '',
  valueEqual: '',
  isBlank: false,
  notBlank: false,
})
const emit = defineEmits(['filter-reset', 'column-filter-confirm', 'update:columnItem'])
// 筛选类型 input select number-range date-picker
const mode = computed(() => {
  let tempMode = props.columnItem?.filterMode ? props.columnItem?.filterMode : props.columnItem?.editType
  // updateFilterOps(tempMode)
  filterValueSate.value.ops = getFilterOperation(tempMode)
  // 当时input类型时，modelValue是个对象
  if (tempMode === 'input') {
    if (typeof props.columnItem.modelValue === 'string') {
      
      props.columnItem.modelValue = {}
    } else if (!('inputValue' in props.columnItem.modelValue)) {
      props.columnItem.modelValue.inputValue = ''
    }
  }
  return tempMode
})
// 筛选类型
const updateFilterOps = (mode) => {
  switch (mode) {
    case 'select':
      filterValueSate.value.ops = 'in'
      break
    case 'number-range':
    case 'date-picker':
    case 'time-picker':
      filterValueSate.value.ops = 'between'
      break
    default:
      filterValueSate.value.ops = 'like'
      break
  }
}
watch(
  () => props.columnItem.modelValue.isBlank,
  (newValue, oldValue) => {
    if (newValue) {
      props.columnItem.modelValue.notBlank = false
      // props.columnItem.modelValue = ''
    }
    // if (!newValue) {
    //   props.columnItem.modelValue.isBlank = false
    // }
  }
)
watch(
  () => props.columnItem.modelValue.notBlank,
  (newValue, oldValue) => {
    if (newValue) {
      props.columnItem.modelValue.isBlank = false
      // props.columnItem.modelValue = ''
    }
    // if (!newValue) {
    //   props.columnItem.modelValue.notBlank = false
    // }
  }
)
// watch(
//   () => filterValueSate.value.isBlank,
//   (newValue, oldValue) => {
//     if (newValue) {
//       filterValueSate.value.notBlank = false
//       // props.columnItem.modelValue = ''
//     }
//   }
// )
// watch(
//   () => filterValueSate.value.notBlank,
//   (newValue, oldValue) => {
//     if (newValue) filterValueSate.value.isBlank = false
//   }
// )
// const filterValue = ref(props.modelValue)
const updateValue = (event) => {
  // emit('update:columnItem', event)
  emit('update:columnItem', { ...props.columnItem, modelValue: event })
}
const reSet = () => {
  filterValueSate.value.valueLike = ''
  filterValueSate.value.valueIn = []
  filterValueSate.value.valueBetweenMin = ''
  filterValueSate.value.valueBetweenMax = ''
  filterValueSate.value.valueEqual = ''
  filterValueSate.value.isBlank = false
  filterValueSate.value.notBlank = false
  // eslint-disable-next-line vue/no-mutating-props
  const objectType = Object.prototype.toString.call(props.columnItem.modelValue)
  if (objectType === '[object Object]') {
    // 对象类型，检查对象属性是否有值
    props.columnItem.modelValue.inputValue = ''
    props.columnItem.modelValue.isBlank = false
    props.columnItem.modelValue.notBlank = false
  } else if (Array.isArray(props.columnItem.modelValue)) {
    // 数组类型，检查数组长度是否大于0以及是否显示高级搜索
    props.columnItem.modelValue = []
  } else {
    // 其他类型（假设是非空字符串或数字等基本类型）
    props.columnItem.modelValue = ''
  }

  emit('update:columnItem', { ...props.columnItem, modelValue: event })
  emit('filter-reset', filterValueSate.value)
}
const handleInputFrom = (e) => {
  filterValueSate.value.valueBetweenMin = e
}
const handleInputTo = (e) => {
  filterValueSate.value.valueBetweenMax = e
}
const filterConfirm = () => {
  // if (mode.value === 'input') {
  //   props.columnItem.modelValue = {
  //     inputValue: filterValueSate.value.valueLike,
  //     isBlank: filterValueSate.value.isBlank,
  //     notBlank: filterValueSate.value.notBlank,
  //   }
  // }
  // eslint-disable-next-line vue/no-mutating-props
  props.columnItem.showHighSearch = true
  // props.columnItem.modelValue = e.columnItem?.modelValue
  emit('update:columnItem', { ...props.columnItem, showHighSearch: true })
  emit('column-filter-confirm', { columnItem: props.columnItem, filterObj: filterValueSate.value })
  // emit('update:columnItem', { ...props.columnItem })
}
</script>
<style lang="less" scoped>
@prefix-cls: ~'oy-table-filter';
.@{prefix-cls} {
  width: 100%;
  &-footer {
    width: 100%;
    padding: 10px 0 0;
    margin-top: 30px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-top: 1px solid #e8e8e8;
    &__check1 {
      margin-right: 10px !important;
    }
    &__btn {
      // align-self: flex-end;
    }
  }
}
</style>
